<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome To Self-Introduction</title>
	<link rel="stylesheet" type="text/css" href="style/index.css">
	<style type = "text/css">
		*
		{
			margin:0px;
			padding:0px;
		}
		body
		{
			width: 1900px;
			background: rgba(33,33,33,1);	
		}
	</style>
</head>

<body>
	<a name="top"></a>
	<div id = "slogn">
		<div id = "LOBSTER">
			<p>LOBSTER</p>
		</div>
		<div id = "border">
		</div>
		<div id = "slogn_font">
			<p>随心所欲不逾矩</p>
		</div>
		<div id = "slogn_shallow">
			<p>随心所欲不逾矩</p>
		</div>
	</div>
	
	<div id = "introduction">
		<img src="images/images/introduction01_01.jpg" alt="/">
		<img src="images/images/introduction01_02.jpg" alt="">
		<img src="images/images/introduction01_03.jpg" alt="">
		<img src="images/images/introduction01_04.jpg" alt="">
		<div id = "bottom">
			<a href="#my_hobbit"><img src="images/images/introduction01_05.png" alt=""></a>
		</div>
	</div>
	
	<a name = "my_hobbit"></a>
	
	<div id = "hobbit">
		<a><img src="images/hobby01.jpg" alt="" id = "hobby01">
		<p class = "english">Art Designer</p>
		<div class = "border_hobbit"></div>
		<p class = "up">美工</p>
		<p class = "down">美工</p></a>
		<a><img src="images/hobby02.jpg" alt="" id = "hobby02">
		<p class = "english">Video Clip</p>
		<div class = "border_hobbit"></div>
		<p class = "up">剪辑</p>
		<p class = "down">剪辑</p></a>
		<a><img src="images/hobby03.jpg" alt="" id = "hobby03">
		<p class = "english">Motorcycles</p>
		<div class = "border_hobbit"></div>
		<p class = "up">摩的</p>
		<p class = "down">摩的</p></a>
		<a><img src="images/hobby04.jpg" alt="" id = "hobby04">
		<p class = "english">Street Fitness</p>
		<div class = "border_hobbit"></div>
		<p class = "up">街健</p>
		<p class = "down">街健</p></a>
		<a><img src="images/hobby05.jpg" alt="" id = "hobby05">
		<p class = "english">Three Major Items</p>
		<div class = "border_hobbit"></div>
		<p class = "up">三大项</p>
		<p class = "down">三大项</p></a>
		<a><img src="images/hobby06.jpg" alt="" id = "hobby06">
		<p class = "english">Boxing</p>
		<div class = "border_hobbit"></div>
		<p class = "up">搏击</p>
		<p class = "down">搏击</p></a>
		<a><img src="images/hobby07.jpg" alt="" id = "hobby07">
		<p class = "english">Guitar</p>
		<div class = "border_hobbit"></div>
		<p class = "up">吉他</p>
		<p class = "down">吉他</p></a>
		<a><img src="images/hobby08.jpg" alt="" id = "hobby08">
		<p class = "english">Game</p>
		<div class = "border_hobbit"></div>
		<p class = "up">游戏</p>
		<p class = "down">游戏</p></a>
	</div>
	<div id = "back_top">
	<a href="#top">回到顶部</a>
	</div>
</body>
</html>
